<template>
	<view class="detail-main">
		
		<tui-card :imageUrl="orderInfo.createUserAvatar"
				  :image="imgStyle"
		 :titleText ="orderInfo.reqType" :tagText ="orderInfo.createDate">
		 <template v-slot:body>
		 	<view class="tui-body">
		 		<view class="detail-label">
					<span>发布人</span>
					<span>{{orderInfo.createUserName}}</span>
				</view>
				<view class="detail-label">
					<span>联系电话</span>
					<span>{{orderInfo.phone}}</span>
				</view>
				<view class="detail-label">
					<span>预约时间</span>
					<span>{{orderInfo.orderStartTime}}</span>
				</view>
		 	</view>
		 </template>
		
		</tui-card>
		
		<tui-card titleText ="详细信息" :tagText ="orderInfo.reqType" :tag="tagStyle" style="margin-top: 20rpx;">
			<template v-slot:body>
				<view class="tui-body">
					<view v-if="orderInfo.reqType == '家政服务'">
						<view class="detail-label">
							<view class="order-address-label">服务地址</view>
							<view class="order-address-content" >
								<span>{{orderInfo.housemakeAddress.address}}</span>
								<span>{{orderInfo.housemakeAddress.linkman}} &nbsp;&nbsp; {{orderInfo.housemakeAddress.linkphone}}</span>
							</view>
						</view>
						<view class="detail-label">
							<span>房屋面积</span>
							<span>{{orderInfo.housemakeSpace}}&nbsp;平方米</span>
						</view>
						<view class="detail-label">
							<span>维修类型</span>
							<span>{{orderInfo.housemakeMtType}}</span>
						</view>
					</view>
					<view v-if="orderInfo.reqType == '跑腿服务'">
						<view class="detail-label">
							<span>跑腿类型</span>
							<span>{{orderInfo.errandType}}</span>
						</view>
						<view class="detail-label">
							<view class="order-address-label">取件地</view>
							<view class="order-address-content" >
								<span>{{orderInfo.errandPickAddress.address}}</span>
								<span>{{orderInfo.errandPickAddress.linkman}} &nbsp;&nbsp; {{orderInfo.errandPickAddress.linkphone}}</span>
							</view>
						</view>
						<view class="detail-label">
							<view class="order-address-label">送往地</view>
							<view class="order-address-content" >
								<span>{{orderInfo.errandDestinateAddress.address}}</span>
								<span>{{orderInfo.errandDestinateAddress.linkman}} &nbsp;&nbsp; {{orderInfo.errandDestinateAddress.linkphone}}</span>
							</view>
						</view>
						<view class="detail-label">
							<span>大小</span>
							<span>{{orderInfo.errandSize}}</span>
						</view>
						<view class="detail-label">
							<span>件数</span>
							<span>{{orderInfo.errandNum}}&nbsp; 件</span>
						</view>
					</view>
					<view v-if="orderInfo.reqType == '居家养老'">
						<view class="detail-label">
							<span>养老服务类型</span>
							<span>{{orderInfo.oldType}}</span>
						</view>
						<view v-if="orderInfo.oldType == '陪诊' || orderInfo.oldType == ''">
							<view class="detail-label">
								<span>服务医院</span>
								<span>{{orderInfo.oldHospital}}</span>
							</view>
							<view class="detail-label">
								<span>陪诊人</span>
								<span>{{orderInfo.oldPerson}}</span>
							</view>
							<view class="detail-label">
								<span>陪诊特殊要求</span>
								<span>{{orderInfo.oldSpecialReq}}</span>
							</view>
						</view>
						<view v-if="orderInfo.oldType == '简单打扫卫生' || orderInfo.oldType == ''">
							<view class="detail-label">
								<view class="order-address-label">上门地址</view>
								<view class="order-address-content" >
									<span>{{orderInfo.oldPickAddress.address}}</span>
									<span>{{orderInfo.oldPickAddress.linkman}} &nbsp;&nbsp; {{orderInfo.oldPickAddress.linkphone}}</span>
								</view>
							</view>
							<view class="detail-label">
								<span>房屋面积</span>
								<span>{{orderInfo.oldSpace}}&nbsp;平方米</span>
							</view>
						</view>
					</view>
					<view v-if="orderInfo.reqType == '接送小孩'">
						<view class="detail-label">
							<span>小孩姓名</span>
							<span>{{orderInfo.kidsName}}</span>
						</view>
						<view class="detail-label">
							<span>所在班级</span>
							<span>{{orderInfo.kidsClass}}</span>
						</view>
						<view class="detail-label">
							<view class="order-address-label">去哪里接</view>
							<view class="order-address-content" >
								<span>{{orderInfo.kidsPickAddress.address}}</span>
								<span>{{orderInfo.kidsPickAddress.linkman}} &nbsp;&nbsp; {{orderInfo.kidsPickAddress.linkphone}}</span>
							</view>
						</view>
						<view class="detail-label">
							<view class="order-address-label">送到哪里</view>
							<view class="order-address-content" >
								<span>{{orderInfo.kidsDestinateAddress.address}}</span>
								<span>{{orderInfo.kidsDestinateAddress.linkman}} &nbsp;&nbsp; {{orderInfo.kidsDestinateAddress.linkphone}}</span>
							</view>
						</view>
					</view>
					<view v-if="orderInfo.reqType == '上门煮饭'">
						<view class="detail-label">
							<view class="order-address-label">上门地址</view>
							<view class="order-address-content" >
								<span>{{orderInfo.foodAddress.address}}</span>
								<span>{{orderInfo.foodAddress.linkman}} &nbsp;&nbsp; {{orderInfo.foodAddress.linkphone}}</span>
							</view>
						</view>
						<view class="detail-label">
							<span>煮饭要求</span>
							<span>{{orderInfo.foodReq}}</span>
						</view>
					</view>
					<view v-if="orderInfo.reqType == '宠物服务'">
						<view class="detail-label">
							<span>宠物类型</span>
							<span>{{orderInfo.petType}}</span>
						</view>
						<view class="detail-label">
							<view class="order-address-label">取宠地</view>
							<view class="order-address-content" >
								<span>{{orderInfo.petPickAddress.address}}</span>
								<span>{{orderInfo.petPickAddress.linkman}} &nbsp;&nbsp; {{orderInfo.petPickAddress.linkphone}}</span>
							</view>
						</view>
					</view>
					<view class="detail-label">
						<view class="order-address-label">图片描述</view>
						<view v-for="(item, index) in imgArr" :key="index">
							<tui-lazyload-img width="200rpx" height="200rpx" :src="item.src || ''"
								@click="previewImage(index)"></tui-lazyload-img>
						</view>
						<tui-gallery :urls="imgArr" :current="currentImg" :show="show" @hide="hide"></tui-gallery>
					</view>
				</view>
				
			</template>
		 </tui-card>
		 
		 <tui-card :imageUrl="orderInfo.pickUserAvatar"
		 		  :image="imgStyle"
				  titleText ="接单信息" :tagText ="orderInfo.pickDate" v-if="pickShow">
			  <template v-slot:body>
				<view class="tui-body">
					<view class="detail-label">
						<span>接单人姓名</span>
						<span>{{orderInfo.pickUserName}}</span>
					</view>
					<view class="detail-label">
						<span>接单人联系方式</span>
						<span>{{orderInfo.pickUserPhone}}</span>
					</view>
					<view class="detail-label">
						<span>接单时间</span>
						<span>{{orderInfo.pickDate}}</span>
					</view>
				</view>
			  </template>
		  </tui-card>
		  <view class="sub-btn" v-if="canPick && orderInfo.orderStatus == '发布'" >
		  	<tui-button type="primary" @click="pickSubmit":loading="loading" :disabled="loading" shape="circle">接单</tui-button>
		  </view>
		  <tui-dialog :buttons="buttons" :show="subShow" title="提示" @close="close" @click="buttonTap">
		   <template v-slot:content>
		   	{{subInfo}}
		   </template>
		  </tui-dialog>
		  <tui-toast ref="toast"></tui-toast>
	</view>
</template>

<script>
export default {
	data(){
		return {
			orderInfo: {},
			imgStyle: {
			  height: 60, //图片高度
			  width: 60, //图片宽度
			  circle: true //是否圆角
			},
			tagStyle: {
				size: 24, //字体大小
				color: "#00dea7", //字体颜色
				padding: "15rpx",
				bgcolor: "#eafffa",
				borderRadius: "10rpx"
			},
			imgArr: [],
			show: false,
			currentImg: 0,
			loading: false,
			canPick: false,
			buttons:[{
				text: '取消'
			 }, {
				text: '确定',
				color: '#586c94'
			}],
			subShow: false,
			subInfo: '',
			pickShow: false
		}
	},
	async onLoad(options) {
		
		// 判断是否有接单资格permission 包含 WORKER(工作人员)
		let userInfo = uni.getStorageSync("user_info");
		console.log(userInfo);
		if(userInfo.permissions.includes("WORKER")) this.canPick = true;
		console.log(userInfo)
		
		// 加载表单数据
		this.orderInfo = JSON.parse(decodeURIComponent(options.data));
		let imgs = this.orderInfo.img.split(",");
		imgs.forEach(e => {
			this.imgArr.push({
				src: e,
				desc: ''
			})
		})
		// 判断是否要展示接单信息
		if(this.orderInfo.orderStatus == '已接单' || this.orderInfo.orderStatus == '已完成' ){
			this.pickShow = true;
		}
	},
	methods: {
		previewImage(index) {
			this.currentImg = index;
			this.show = true
		},
		hide(){
			this.show = false
		},
		// 调用此方法显示dialog
		pickSubmit() {
			this.loading = true;
			this.subInfo = "您确定接单" + this.orderInfo.createUserName + "的" + this.orderInfo.reqType + "?";
			this.subShow = true
		},
		close() {
			this.subShow = false
		},
		buttonTap(e){
			let _this = this;
			if(e.item.text == '确定'){
				_this.$api.pickOrder({
					id: _this.orderInfo.id
				}).then(res => {
					let params;
					if(res.success){
						params = {
							title: "接单成功！",
							icon: false
						};
						_this.orderInfo = res.result;
						_this.refreshIndex();
						_this.pickShow = true;
						console.log(_this.pickShow);
						_this.loading = false;
					}else {
						params = {
							title: res.message,
							icon: false
						};
						if(res.message == '无权限接单'){
							_this.refreshPermissions();
						}else if(res.message =='订单已被占用'){
							_this.orderInfo.orderStatus = '已接单';
						}
					}
					_this.$refs.toast && _this.$refs.toast.show(params);
					
				})
			}else {
				_this.loading = false;
			}
			_this.close()
		},
		refreshIndex(){
			let page = getCurrentPages();
			let prev = page[page.length - 2];
			prev.$vm.initData();
		},
		refreshPermissions(){
			let userInfo = uni.getStorageSync("user_info");
			userInfo.permissions = userInfo.permissions.replace("WORKER", "");
			uni.setStorageSync("user_info", userInfo);
			this.canPick = false;
		}
	}
}
</script>

<style>
	@import url("order-detail.css");
</style>